<template>
  <div class="careerOverviewWrapper" v-loading="loading">
    <div class="mainContent">
      <template v-for="item,index in secondLayerList">
        <careerIntroduction v-if="item.layerId==61" :key="index" :careerIntroductionData="item.children" />
        <workEnviroment v-else-if="item.layerId==8" :workEnviromentData="item.children"
          :workEnviromentIndex="workEnviromentIndex" :key="index" />
        <careerValue v-else-if="item.layerId==21" :key="item.layerId" :scrollFirstIndex="scrollFirstIndex"
          :secondLayerData="item.children" :scrollSecondIndex="index" :topId="topId" :isAdmin="isAdmin"
          :isSuperToken="isSuperToken" />
        <targetGroup v-else-if="item.layerId==67" :key="item.layerId" :scrollFirstIndex="scrollFirstIndex"
          :secondLayerData="item.children" :scrollSecondIndex="index" :topId="topId" :isAdmin="isAdmin"
          :isSuperToken="isSuperToken" />
        <generalTextComponent v-else :key="index" :scrollFirstIndex="scrollFirstIndex" :layerList="secondLayerList"
          :layerItem="item" :topId="topId" :isAdmin="isAdmin" :aiCreateStatus.sync="aiCreateStatus"
          :isSuperToken="isSuperToken" />
      </template>
    </div>
    <rightsideScroller :secondLayerList="secondLayerList" :workEnviromentIndex="workEnviromentIndex" />
  </div>

</template>

<script>
import { homepageLayerData } from "@/api/position-detail";
import careerIntroduction from "./careerIntroduction";

import careerValue from "./careerValue";
import targetGroup from "./targetGroup";
import workEnviroment from "./workEnviroment";
import generalTextComponent from "../generalTextComponent";
import rightsideScroller from "../components/rightsideScroller.vue";
import VueCookies from "vue-cookies";

export default {
  name: "careerOverview",
  props: {
    allLayerList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      textLayerList: [], //没有被特定的纬度，全部用文字显示；
      secondLayerIds: [],
      secondLayerList: [], //这个是存的是三级维度里有data的，其他页面的也是
      layerList: [],
      firstSelectedNav: "",
      secondSelectedNav: "",
      isClickScroll: false,
      editData: {},
      loading: true,
      isSuperToken: false,
      aiCreateStatus: false,
      isAdmin: false,
      scrollFirstIndex: "0",
      workEnviromentIndex: 1, //用来右侧滚动栏用的
    };
  },
  mounted() {
    this.isSuperToken =
      localStorage.getItem("superToken") ==
        "407404EAEC845F1B91A104B80FE86D89" ||
      localStorage.getItem("superToken") == "5FD271D8A0AA315DD218801C0C3A0DEA";
    if (
      this.$route.query.superToken == "407404EAEC845F1B91A104B80FE86D89" ||
      this.$route.query.superToken == "5FD271D8A0AA315DD218801C0C3A0DEA"
    ) {
      this.specialHidden = false;
    }
  },
  methods: {
    changeEditStatus(status) {
      this.secondLayerList.forEach((item, index) => {
        if (item.children) {
          item.children.forEach((_item, _index) => {
            if (status) {
              //先填充编辑用的字段，再切换变量
              if (_item.data instanceof Array) {
                this.$set(_item, "listContent", [..._item.data]);
              } else {
                //如果是直接展示文字的
                const answer = _item.data.answer;
                this.$set(
                  _item,
                  "allContent",
                  answer
                    ? answer.answerContent.replace(/<br>/g, "\n")
                    : "待补充"
                );
              }
            }
            this.$set(_item, "currentEdit", status);
          });
        }
      });
    },
    adminInit() {
      const userToken = VueCookies.get("vue_admin_template_token");
      // console.log(userToken)
      if (userToken === "admin-token") {
        this.isAdmin = true;
      }
    },
    reqHomepageLayerData() {
      const params = {
        layerIds: this.secondLayerIds.join("_"),
        id: this.$route.query.id,
        topId: this.topId,
      };
      homepageLayerData(params)
        .then((res) => {
          if (res.code == 200) {
            this.secondLayerList = res.data;
          }
        })
        .catch((err) => {
          //console.log("err", err);
          this.$message.error("服务器开小差啦");
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  watch: {
    allLayerList: {
      handler(newValue, oldValue) {
        if (newValue.length) {
          this.adminInit();
          newValue.forEach((item, index) => {
            if (item.layerId == 1) {
              this.topId = item.layerId;
              this.scrollFirstIndex = index + "";
              this.secondLayerIds = item.children.map((_item, _index) => {
                if (_item.layerId == 8) {
                  this.workEnviromentIndex = _index;
                }
                return _item.layerId;
              });
              this.reqHomepageLayerData();
            }
          });
        }
      },
      immediate: true,
    },
  },
  components: {
    careerIntroduction,
    workEnviroment,
    generalTextComponent,
    rightsideScroller,
    careerValue,
    targetGroup,
  },
};
</script>

<style lang="scss" scoped>
.careerOverviewWrapper {
  display: flex;
  position: relative;
  box-shadow: inset 4px 4px 11px 2px rgba(118, 170, 244, 0.18);
  border: 1px solid #eaedf7;
  padding: 14px;
  padding-bottom: 0;
  padding-right: 0;
  flex: 1;
  max-height: calc(100vh - 160px);
  border-radius: 8px;
  overflow-y: scroll;
  .mainContent {
    flex: 1;
  }
}
</style>